<template>
    <div>
      <div class="ba_f outmain">
        <div class="shuju_title">
          <div class="shuju_title_text">
            <span>筛选条件</span>
          </div>
        </div>
        <el-form :inline="false" :model="form" class="demo-form-inline" label-width="100px">
          <div class="flex ba_f">
            <el-form-item label="查询日期：" class="mar_t20">
              <div class="flex-bet">
                <div>
                  <el-radio-group v-model="form.timeType" @change="selectType">
                    <el-radio-button label="1">今天</el-radio-button>
                    <el-radio-button label="2">近七天</el-radio-button>
                    <el-radio-button label="3">近十五天</el-radio-button>
                    <el-radio-button label="4">自定义时间</el-radio-button>
                  </el-radio-group>
                  <span class="mar_l20" v-if="form.timeType=='4'">
                <el-date-picker v-model="form.time" type="daterange" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" format="yyyy年MM月dd日" :picker-options="pickerOptions"  @change="selectType"></el-date-picker>
              </span>
                </div>
              </div>
            </el-form-item>
          </div>
          <div class="flex ba_f">
            <el-form-item label="选择店铺：">
              <div class="mar_l20">
                <el-select v-model="form.shopValue" placeholder="请选择" @change="changeStore">
                  <el-option v-for="item in options" :key="item.id" :label="item.name+'(ID:'+item.id+')'"
                             :value="item.id"></el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>
        <div class="mar_t20 ba_f outmain">
        <div class="shuju_title">
          <div class="shuju_title_text">
            <span>当面付概况</span>
          </div>
        </div>
        <div class="main-icon flex t_l mar_t20">
          <div class="flex-1 t_l pad_20 borderBG mar_r20">
            <div class="flex-bet flex-y-top">
              <div>
                <p class="color_9 fon_14">今日收款</p>
                <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ newDate.money  || 0}}</p>
                <div class="flex">
                  <p class="fon_14 color_9">有效订单：{{ newDate.count || 0 }}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-1 t_l pad_20 borderBG mar_r20">
            <div class="flex-bet flex-y-top">
              <div>
                <p class="color_9 fon_14">预计收入</p>
                <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ newDate.estimate  || 0}}</p>
                <div class="flex">
                  <p class="fon_14 color_9">服务费支付：{{ newDate.serviceMoney || 0}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-1 t_l pad_20 borderBG mar_r20">
            <div class="flex-bet flex-y-top">
              <div>
                <p class="color_9 fon_14">总收款</p>
                <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ newDate.sumMoney || 0 }}</p>
                <div class="flex">
                  <p class="fon_14 color_9">有效订单：{{ newDate.sumCount || 0 }}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-1 t_l pad_20 borderBG">
            <div class="flex-bet flex-y-top">
              <div>
                <p class="color_9 fon_14">总支付人数</p>
                <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ newDate.payUserNum  || 0}}</p>
                <div class="flex yc">
                  <p class="fon_14 color_9">订单：{{ newDate.money || 0}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--      <div id="zhentiEch2" style="height: 360px;" class="mar_t20"></div>-->
      </div>
        <div class="mar_t20">
        <div class="mar_t20 flex-bet">
          <div class="flex-g-1 ba_f pad_20 bor_rad5">
            <div class="shuju_title">
              <div class="shuju_title_text">
                <span>订单渠道</span>
              </div>
            </div>
            <div id="mainEch32" class="mar_r20" style="height: 280px;width:580px;margin-top: 40px"></div>
          </div>
          <!--        <div class="flex-g-1 ba_f mar_lr20 pad_20 bor_rad5">-->
          <!--          <div class="shuju_title">-->
          <!--            <div class="shuju_title_text">-->
          <!--              <span>订单渠道</span>-->
          <!--            </div>-->
          <!--          </div>-->
          <!--          <div id="mainEch33" class="mar_r20" style="height: 280px;width:380px;margin-top: 40px"></div>-->
          <!--        </div>-->
          <div class="flex-g-1 ba_f pad_20 bor_rad5 mar_l20">
            <div class="shuju_title">
              <div class="shuju_title_text">
                <span>支付占比</span>
              </div>
            </div>
            <div id="mainEch34" class="mar_r20" style="height: 280px;width:580px;margin-top: 40px"></div>
          </div>
        </div>
      </div>
        <div class="mar_t20 ba_f outmain">
            <div class="shuju_title">
                <div class="shuju_title_text">
                    <span>整体看板</span>
                </div>
                <!--                <div class="fon_12 ab r0 mar_r10 color_9">更新时间：2020-09-04 13:32:59</div>-->
            </div>
<!--            <div class="main-icon flex t_l mar_t20">-->
<!--                <div class="flex-1 t_l pad_20 bortColor">-->
<!--                    <div class="flex-bet flex-y-top">-->
<!--                        <div>-->
<!--                            <p class="title6 fon_14">访客数(uv)</p>-->
<!--                            <p class="fon_30 title35 lh16 pad_tb_20">{{UserData.userCount}}</p>-->
<!--                            <p class="fon_12 title6 lh25">较前一日：{{UserData.yesUserCount}}</p>-->
<!--                        </div>-->
<!--                        <div class="toolTip">-->
<!--                            <el-tooltip effect="dark" placement="top">-->
<!--                                <div slot="content">统计周期内，全店各页面的访问人数，同一访客多次访问会进行去重</div>-->
<!--                                <button type="button"-->
<!--                                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                                    <span><i class="el-icon-question"></i></span>-->
<!--                                </button>-->
<!--                            </el-tooltip>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="flex-1 t_l pad_20 bortColor">-->
<!--                    <div class="flex-bet flex-y-top">-->
<!--                        <div>-->
<!--                            <p class="title6 fon_14">浏览量(pv)</p>-->
<!--                            <p class="fon_30 title35 lh16 pad_tb_20">{{UserData.visitCount}}</p>-->
<!--                            <p class="fon_12 title6 lh25">较前一日：{{UserData.yesVisitCount}}</p>-->
<!--                        </div>-->
<!--                        <div class="toolTip">-->
<!--                            <el-tooltip effect="dark" placement="top">-->
<!--                                <div slot="content">统计周期内，店铺所有页面被访问的次数，一个人在统计时间内访问多次记为多次</div>-->
<!--                                <button type="button"-->
<!--                                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                                    <span><i class="el-icon-question"></i></span>-->
<!--                                </button>-->
<!--                            </el-tooltip>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="flex-1 t_l pad_20 bortColor">-->
<!--                    <div class="flex-bet flex-y-top">-->
<!--                        <div>-->
<!--                            <p class="title6 fon_14">总访客数(uv)</p>-->
<!--                            <p class="fon_30 title35 lh16 pad_tb_20">{{UserData.userTotal}}</p>-->
<!--                            <p class="fon_12 title6 lh25">较前一日：{{UserData.userTotal}}</p>-->
<!--                        </div>-->
<!--                        <div class="toolTip">-->
<!--                            <el-tooltip effect="dark" placement="top">-->
<!--                                <div slot="content">统计周期内，全店各页面的总访问人数，同一访客多次访问会进行去重</div>-->
<!--                                <button type="button"-->
<!--                                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                                    <span><i class="el-icon-question"></i></span>-->
<!--                                </button>-->
<!--                            </el-tooltip>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="flex-1 t_l pad_20 bortColor">-->
<!--                    <div class="flex-bet flex-y-top">-->
<!--                        <div>-->
<!--                            <p class="title6 fon_14">总浏览量(pv)</p>-->
<!--                            <p class="fon_30 title35 lh16 pad_tb_20">{{UserData.visitTotal}}</p>-->
<!--                            <p class="fon_12 title6 lh25 color_f">较前一日：{{UserData.visitTotal}}</p>-->
<!--                        </div>-->
<!--                        <div class="toolTip">-->
<!--                            <el-tooltip effect="dark" placement="top">-->
<!--                                <div slot="content">统计周期内，店铺所有页面总被访问的次数，一个人在统计时间内访问多次记为多次</div>-->
<!--                                <button type="button"-->
<!--                                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                                    <span><i class="el-icon-question"></i></span>-->
<!--                                </button>-->
<!--                            </el-tooltip>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
            <div id="zhentiEch" style="height: 360px;" class="mar_t20"></div>
        </div>
<!--        <div class="t_r mar_t20">-->
<!--            <div class="fon_12 mar_r10 color_9">-->
<!--                <span class="fon_14 color_3">时间筛选：</span>-->
<!--                <el-date-picker-->
<!--                        v-model="form.time"-->
<!--                        type="daterange"-->
<!--                        range-separator="至"-->
<!--                        start-placeholder="开始日期"-->
<!--                        end-placeholder="结束日期"-->
<!--                        format="yyyy年MM月dd日"-->
<!--                        class="mar_l10"-->
<!--                        @change="changeTime">-->
<!--                </el-date-picker>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="outmain ba_f mar_t10">-->
<!--            <div class="shuju_title mar_b20">-->
<!--                <div class="shuju_title_text">-->
<!--                    <span>访问概况</span>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="flex flex-nowrap pad_tb_10 c2RF">-->
<!--                <div class="crf all mar_r10 curset">-->
<!--                    <p class="font_w500 fon_16 lh25">全部</p>-->
<!--                    <div class="mar_t15 flex-bet fon_14">-->
<!--                        <div class="color_9">访客数</div>-->
<!--                        <div class="">{{UserData.userTotal}}</div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                &lt;!&ndash;        <div class="crf h5 mar_r10">&ndash;&gt;-->
<!--                &lt;!&ndash;          <p class="font_w500 fon_16 lh25">H5</p>&ndash;&gt;-->
<!--                &lt;!&ndash;          <div class="mar_t15 flex-bet fon_14">&ndash;&gt;-->
<!--                &lt;!&ndash;            <div class="color_9">访客数</div>&ndash;&gt;-->
<!--                &lt;!&ndash;            <div class="">0</div>&ndash;&gt;-->
<!--                &lt;!&ndash;          </div>&ndash;&gt;-->
<!--                &lt;!&ndash;        </div>&ndash;&gt;-->
<!--                <div class="crf mili mar_r10 notall">-->
<!--                    <p class="font_w500 fon_16 lh25">小程序</p>-->
<!--                    <div class="mar_t15 flex-bet fon_14">-->
<!--                        <div class="color_9">访客数</div>-->
<!--                        <div class="">{{UserData.userCount}}</div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="mar_t20">-->
<!--                <div class="flex mar_b5" style="background: rgb(92, 137, 253)">-->
<!--                    <div class="serleft color_f pad_lr_10 t_c flex">-->
<!--                        <span class="fon_16">浏览访问</span>-->
<!--                    </div>-->
<!--                    <div class="serright pad_lr_10">-->
<!--                        <div class="rightmoder pad_20 fon_14">-->
<!--                            <div class="flex-bet">-->
<!--                                <div class="">访客数(uv)</div>-->
<!--                                <div class="toolTip">-->
<!--                                    <el-tooltip effect="dark" placement="top">-->
<!--                                        <div slot="content">统计周期内，全店各页面的访问人数，同一访客多次访问会进行去重</div>-->
<!--                                        <button type="button"-->
<!--                                                class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                                            <span><i class="el-icon-question"></i></span>-->
<!--                                        </button>-->
<!--                                    </el-tooltip>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="pad_tb_10">{{UserData.userCount}}</div>-->
<!--                            <div class="color_9">较前一日{{UserData.yesUserCount}}%</div>-->
<!--                        </div>-->
<!--                        <div class="rightmoder pad_20 fon_14">-->
<!--                            <div class="flex-bet">-->
<!--                                <div class="">浏览量(pv)</div>-->
<!--                                <div class="toolTip">-->
<!--                                    <el-tooltip effect="dark" placement="top">-->
<!--                                        <div slot="content">统计周期内，店铺所有页面被访问的次数，一个人在统计时间内访问多次记为多次</div>-->
<!--                                        <button type="button"-->
<!--                                                class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                                            <span><i class="el-icon-question"></i></span>-->
<!--                                        </button>-->
<!--                                    </el-tooltip>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="pad_tb_10">{{UserData.visitCount}}</div>-->
<!--                            <div class="color_9">较前一日 {{UserData.yesVisitCount}}%</div>-->
<!--                        </div>-->
<!--                        <div class="rightmoder pad_20 fon_14">-->
<!--                            <div class="flex-bet">-->
<!--                                <div class="">有效订单数</div>-->
<!--                                <div class="toolTip">-->
<!--                                    <el-tooltip effect="dark" placement="top">-->
<!--                                        <div slot="content">统计时间内，未取消且未发生退款的订单量</div>-->
<!--                                        <button type="button"-->
<!--                                                class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                                            <span><i class="el-icon-question"></i></span>-->
<!--                                        </button>-->
<!--                                    </el-tooltip>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="pad_tb_10">{{UserData.dayUserCount}}</div>-->
<!--                            <div class="color_9">较前一日 {{UserData.newUserCount}}%</div>-->
<!--                        </div>-->
<!--                        <div class="rightmoder pad_20 fon_14">-->
<!--                            <div class="flex-bet">-->
<!--                                <div class="">付款人数</div>-->
<!--                                <div class="toolTip">-->
<!--                                    <el-tooltip effect="dark" placement="top">-->
<!--                                        <div slot="content">统计周期内，付款成功的用户数，一人多次结算记为一人</div>-->
<!--                                        <button type="button"-->
<!--                                                class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                                            <span><i class="el-icon-question"></i></span>-->
<!--                                        </button>-->
<!--                                    </el-tooltip>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="pad_tb_10">{{UserData.dayUserCount}}</div>-->
<!--                            <div class="color_9">较前一日 {{UserData.newUserCount}}%</div>-->
<!--                        </div>-->
<!--                        <div class="rightmoder pad_20 fon_14">-->
<!--                            <div class="flex-bet">-->
<!--                                <div class="">营业额</div>-->
<!--                                <div class="toolTip">-->
<!--                                    <el-tooltip effect="dark" placement="top">-->
<!--                                        <div slot="content">营业金额/付款人数</div>-->
<!--                                        <button type="button"-->
<!--                                                class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                                            <span><i class="el-icon-question"></i></span>-->
<!--                                        </button>-->
<!--                                    </el-tooltip>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="pad_tb_10">{{UserData.todayPayMoney}}</div>-->
<!--                            <div class="color_9">较前一日 {{UserData.newPayMoney}}%</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="flex mar_b5" style="background: rgb(88, 202, 121)">-->
<!--                    <div class="serleft color_f pad_lr_10 t_c flex" style="background: rgb(88, 202, 121)">-->
<!--                        <span class="fon_16">客单价</span>-->
<!--                    </div>-->
<!--                    <div class="serright pad_lr_10" style="background: rgb(240, 248, 240);">-->
<!--                        <div class="rightmoder pad_20 fon_14">-->
<!--                            <div class="flex-bet">-->
<!--                                <div class="">客单价</div>-->
<!--                                <div class="toolTip">-->
<!--                                    <el-tooltip effect="dark" placement="top">-->
<!--                                        <div slot="content">营业金额/付款人数</div>-->
<!--                                        <button type="button"-->
<!--                                                class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                                            <span><i class="el-icon-question"></i></span>-->
<!--                                        </button>-->
<!--                                    </el-tooltip>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="pad_tb_10">{{UserData.todayPrice}}</div>-->
<!--                            <div class="color_9">较前一日 {{UserData.newPrice}}%</div>-->
<!--                        </div>-->
<!--                        <div class="rightmoder pad_20 fon_14">-->
<!--                            <div class="flex-bet">-->
<!--                                <div class="">下单转化率</div>-->
<!--                                <div class="toolTip">-->
<!--                                    <el-tooltip effect="dark" placement="top">-->
<!--                                        <div slot="content">付款人数/访客数</div>-->
<!--                                        <button type="button"-->
<!--                                                class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                                            <span><i class="el-icon-question"></i></span>-->
<!--                                        </button>-->
<!--                                    </el-tooltip>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="pad_tb_10">{{UserData.userTotal}}</div>-->
<!--                            <div class="color_9">较前一日 {{UserData.userTotal}}%</div>-->
<!--                        </div>-->
<!--                        <div class="rightmoder pad_20 fon_14">-->
<!--                            <div class="flex-bet">-->
<!--                                <div class="">跳失率</div>-->
<!--                                <div class="toolTip">-->
<!--                                    <el-tooltip effect="dark" placement="top">-->
<!--                                        <div slot="content">访客数/浏览量</div>-->
<!--                                        <button type="button"-->
<!--                                                class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                                            <span><i class="el-icon-question"></i></span>-->
<!--                                        </button>-->
<!--                                    </el-tooltip>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="pad_tb_10">{{UserData.payLv}}</div>-->
<!--                            <div class="color_9">较前一日 {{UserData.newPayLv}}%</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="outmain ba_f mar_t20">-->
<!--            <div class="shuju_title mar_b20">-->
<!--                <div class="shuju_title_text">-->
<!--                    <span>访问概况</span>-->
<!--                </div>-->
<!--            </div>-->
<!--            <el-table-->
<!--                    :data="tableData"-->
<!--                    stripe-->
<!--                    style="width: 100%">-->
<!--                <el-table-column-->
<!--                        prop="zh"-->
<!--                        label="时间"-->
<!--                >-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        prop="zc"-->
<!--                        label="店铺浏览量(pv)"-->
<!--                >-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        prop="zc"-->
<!--                        label="店铺访客数(uv)"-->
<!--                >-->
<!--                </el-table-column>-->
<!--            </el-table>-->
<!--        </div>-->
    </div>
</template>
<script>
    import echarts from 'echarts'
    import {mapState} from "vuex";
    import {getCashierData} from "@/api/statistics";
    import {changeDate} from "@/utils/index";
    export default {
        mounted() {
            // this.init();
            this.getrealCover();
            window.addEventListener("resize", this.initchart);
            // this.init3();
          // this.mainEch32()
          // this.mainEch34()
        },
        data() {
            return {
              selectData: '',
              pickerOptions: {
                onPick: ({ maxDate, minDate }) => {
                  this.selectData = minDate.getTime()
                  if (maxDate) {
                    this.selectData = ''
                  }
                },
                disabledDate: (time) => {
                  if (!this.isNull(this.selectData)) {
                    var date = new Date(this.selectData)
                    return date.getMonth() > new Date(time).getMonth() || date.getMonth() < new Date(time).getMonth()
                  } else {
                    return false
                  }
                }
              },
                // UserData:{
                //     userTotal:"",
                //     userCount:"",
                //     yesUserCount:"",
                //     visitCount:"",
                //     yesVisitCount:"",
                //     todayPayNum:"",
                //     newPayNum:"",
                //     dayUserCount:"",
                //     newUserCount:"",
                //     todayPayMoney:"",
                //     newPayMoney:"",
                //     todayPrice:"",
                //     newPrice:"",
                //     todayConver:"",
                //     newConver:"",
                //     payLv:"",
                //     newPayLv:"",
                //     visitTotal:"",
                // },
                newDate:{},
                form: {
                    shopValue: '',
                    timeType: '1',
                    time: [new Date(),new Date()],
                    Mtime: '',
                },
                value: '',
                value1: new Date(),
                options: [{
                    value: '1',
                    label: '自然日'
                }, {
                    value: '2',
                    label: '自然月'
                }],
                optionsValue: '1',
                optionsShop: [{
                    value: '1',
                    label: '总店'
                }, {
                    value: '2',
                    label: '总店1'
                }],
                tableData:[],
                echarts2_option: {
                    color: ['#4284ED', '#42CCF0'],
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['支付金额', '订单数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        // 去除坐标轴上的刻度线
                        axisTick: {
                            show: false,
                            lineStyle: {
                                color: '#ccc',
                                type: 'dashed'
                            }
                        },
                        // x轴的字体样式
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        // x轴的颜色和宽度
                        axisLine: {
                            lineStyle: {
                                color: '#4ECB73',
                                width: 2,   //这里是坐标轴的宽度,可以去掉
                            }
                        },
                        data: []
                    },
                    yAxis: {
                        type: 'value',
                        axisTick: {       //y轴刻度线
                            "show": false
                        },
                        axisLine: {
                            "show": false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dotted',
                                color: '#DDDDDD',
                            },
                            show: true
                        }
                    },
                    series: [
                        {
                            name: '支付金额',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            data: []
                        },
                        {
                            name: '订单数',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            data: []
                        }
                    ]
                },
                echarts1_option: {
                    color: ['#0095FF', '#FDD835', '#4EC478', '#40C045'],
                    // tooltip: {
                    //     trigger: 'item',
                    //     formatter: '{a} <br/>{b}: {c} ({d}%)'
                    // },
                    legend: {
                        orient: 'vertical',
                        right: 0,
                        data: ['安卓', 'IOS', '其他',]
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['40%', '60%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '16',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 35, name: '安卓'},
                                {value: 310, name: 'IOS'},
                                {value: 10, name: '其他'},
                            ],
                        }
                    ]
                },
                echarts3_option: {
                    color: ['#0095FF', '#4CA8FF', '#4EC478', '#FBA33F'],
                    // tooltip: {
                    //     trigger: 'item',
                    //     formatter: '{a} <br/>{b}: {c} ({d}%)'
                    // },
                    legend: {
                        orient: 'vertical',
                        right: 0,
                        data: ['小程序']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['40%', '60%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '16',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 35, name: '小程序'}
                            ],
                        }
                    ]
                },
                echarts32_option: {
                  color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
                  tooltip: {
                    trigger: 'item'
                  },
                  legend: {
                    orient: 'vertical',
                    right: 0,
                    data: ['微信小程序', '支付宝小程序']
                  },
                  series: [
                    {
                      name: '支付订单数',
                      type: 'pie',
                      radius: ['40%', '60%'],
                      avoidLabelOverlap: false,
                      label: {
                        show: false,
                        position: 'center'
                      },
                      emphasis: {
                        label: {
                          show: true,
                          fontSize: '20',
                          fontWeight: 'bold'
                        },
                        itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                      },
                      labelLine: {
                        show: false
                      },
                      data: [
                        {value: 35.00, name: '微信小程序'},
                        {value: 20.00, name: '支付宝小程序'},
                      ],
                    }
                  ]
                },
                echarts33_option: {
                  color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
                  tooltip: {
                    trigger: 'item'
                  },
                  legend: {
                    orient: 'vertical',
                    right: 0,
                    data: ['外卖订单', '外卖自提订单', '当面付订单']
                  },
                  series: [
                    {
                      name: '支付金额',
                      type: 'pie',
                      radius: ['40%', '60%'],
                      avoidLabelOverlap: false,
                      label: {
                        show: false,
                        position: 'center'
                      },
                      emphasis: {
                        label: {
                          show: true,
                          fontSize: '20',
                          fontWeight: 'bold'
                        },
                        itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                      },
                      labelLine: {
                        show: false
                      },
                      data: [
                        {value: 35.00, name: '外卖订单'},
                        {value: 20.00, name: '外卖自提订单'},
                        {value: 20.00, name: '当面付订单'},
                      ],
                    }
                  ]
                },
                echarts34_option: {
                  color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
                  tooltip: {
                    trigger: 'item'
                  },
                  legend: {
                    orient: 'vertical',
                    right: 0,
                    data: ['微信支付', '支付宝支付', '余额支付']
                  },
                  series: [
                    {
                      name: '支付金额',
                      type: 'pie',
                      radius: ['40%', '60%'],
                      avoidLabelOverlap: false,
                      label: {
                        show: false,
                        position: 'center'
                      },
                      emphasis: {
                        label: {
                          show: true,
                          fontSize: '20',
                          fontWeight: 'bold'
                        },
                        itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                      },
                      labelLine: {
                        show: false
                      },
                      data: [
                        {value: 35.00, name: '微信支付'},
                        {value: 20.00, name: '支付宝支付'},
                        {value: 20.00, name: '余额支付'},
                      ],
                    }
                  ]
                },
            }
        },
        created() {
            // this.value = this.market[0].id
            // this.optionsShop = this.market
          this.form.shopValue = this.market[0].id;
          this.options = this.market;
        },
        computed:{
            ...mapState(['market'])
        },
        methods: {
            init2() {
                let myChart = echarts.init(document.getElementById('zhentiEch'))
                myChart.setOption(this.echarts2_option, true)
            },
            init() {
                let myChart = echarts.init(document.getElementById('mainEch'))
                myChart.setOption(this.echarts1_option, true)
            },
            init3() {
                let myChart = echarts.init(document.getElementById('mainEch2'))
                myChart.setOption(this.echarts3_option, true)
            },
            initchart(){
                let myChart1 = echarts.init(document.getElementById('zhentiEch'))
                myChart1.resize()
            },
            async getrealCover() {
              var params = {
                storeId: this.form.shopValue,
                timeType: this.form.timeType,
                startTime: this.form.timeType == '4' && this.form.time ? changeDate(this.form.time[0]).substr(0,10) : '',
                endTime: this.form.timeType == '4' && this.form.time ? changeDate(this.form.time[1]).substr(0,10) : '',
              };
                const {data} = await getCashierData(params);
                console.log(data)
                if (data) {
                   // this.UserData.userTotal = data.userTotal?data.userTotal:0
                   // this.UserData.userCount = data.userCount?data.userCount:0
                   // this.UserData.yesUserCount = data.yesUserCount?data.yesUserCount:0
                   // this.UserData.visitCount = data.visitCount?data.visitCount:0
                   // this.UserData.yesVisitCount = data.yesVisitCount?data.yesVisitCount:0
                   // this.UserData.todayPayNum = data.todayPayNum?data.todayPayNum:0
                   // this.UserData.newPayNum = data.newPayNum?data.newPayNum:0
                   // this.UserData.dayUserCount = data.dayUserCount?data.dayUserCount:0
                   // this.UserData.newUserCount = data.newUserCount?data.newUserCount:0
                   // this.UserData.todayPayMoney = data.todayPayMoney?data.todayPayMoney:0
                   // this.UserData.newPayMoney = data.newPayMoney?data.newPayMoney:0
                   // this.UserData.todayPrice = data.todayPrice?data.todayPrice:0
                   // this.UserData.newPrice = data.newPrice?data.newPrice:0
                   // this.UserData.todayConver = data.todayConver?data.todayConver:0
                   // this.UserData.newConver = data.newConver?data.newConver:0
                   // this.UserData.payLv = data.payLv?data.payLv:0
                   // this.UserData.newPayLv = data.newPayLv?data.newPayLv:0
                   // this.UserData.userTotal = data.userTotal?data.userTotal:0
                   // this.UserData.visitTotal = data.visitTotal?data.visitTotal:0

                    this.newDate = data
                    this.echarts2_option.series[0].data = data.moneyChar.map(item => item.money);
                    this.echarts2_option.series[1].data = data.countChar.map(item => item.money);
                    this.echarts2_option.xAxis.data = data.moneyChar.map(item => item.hours);
                    this.init2()
                    this.echarts32_option.series[0].data[0].value = +data.wxCount;
                    this.echarts32_option.series[0].data[1].value = +data.aliCount;
                    this.mainEch32()
                    this.echarts34_option.series[0].data[0].value = +data.wxMoney;
                    this.echarts34_option.series[0].data[1].value = +data.aliMoney;
                    this.echarts34_option.series[0].data[2].value = +data.balanceMoney;
                    this.mainEch34()
                }
            },
            mainEch32() {
              let myChart = echarts.init(document.getElementById('mainEch32'))
              myChart.setOption(this.echarts32_option, true)
            },
            mainEch33() {
              let myChart = echarts.init(document.getElementById('mainEch33'))
              myChart.setOption(this.echarts33_option, true)
            },
            mainEch34() {
              let myChart = echarts.init(document.getElementById('mainEch34'))
              myChart.setOption(this.echarts34_option, true)
            },
            selectType(){
              this.getrealCover()
            },
            changeStore(){
                this.getrealCover()
            },
             changeTime(){
                this.getrealCover()
            },
            isNull(value) {
              if (value) {
                return false
              }
              return true
            },
        }
    }
</script>
<style lang="scss" scoped>
    .c2RF {
        height: 92px;
    }

    .curset {
        background-color: #edf4ff;
        border-color: #155bd4;
    }

    .crf {
        height: 92px;
        min-width: 200px;
        max-width: 240px;
        border: 1px solid #dcdee0;
        border-radius: 4px;
        padding: 16px;
        box-sizing: border-box;
        flex: 1 1 200px;
        cursor: pointer;
        transition: box-shadow .2s ease 0s;
    }

    .serleft {
        background-color: rgb(92, 137, 253);
        min-width: 80px;
    }

    .serright {
        background-color: rgb(243, 247, 253);
        display: flex;
        flex-wrap: wrap;
        flex: 1 1 auto;
    }

    .rightmoder {
        min-width: 200px;
        width: 25%;
    }

    .notall {
        color: #c8c9cc;
        background-color: #f7f8fa;
        cursor: not-allowed;
    }

    .lhh40 {
        line-height: 40px;
        height: 40px;
    }
</style>
